<template>
  <view class="statistics-page">
    <view class="total-info">
      <view class="item">
        <view class="val">{{userInfo.total_order || '0'}}</view>
        <view class="txt">总订单数</view>
      </view>
      <view class="item">
        <view class="val">{{userInfo.total_serve_price || '0.00'}}</view>
        <view class="txt">订单总价</view>
      </view>
      <view class="item">
        <view class="val">{{userInfo.total_additional_price || '0.00'}}</view>
        <view class="txt">总附加费</view>
      </view>
    </view>
    <view class="screen-box">
      <view class="name">时间筛选：</view>
      <picker mode="date" :end="startEnd" :value="payload.startTime" @change="updateStart">
        <view class="time-item">
          <view v-if="payload.startTime" class="place">{{payload.startTime}}</view>
          <view v-else class="place empty">开始时间</view>
          <view class="arrow"></view>
        </view>
      </picker>
      <view class="line">-</view>
      <picker mode="date" :start="endStart" :end="end" :value="payload.endTime" @change="updateEnd">
        <view class="time-item">
          <view v-if="payload.endTime" class="place">{{payload.endTime}}</view>
          <view v-else class="place empty">结束时间</view>
          <view class="arrow"></view>
        </view>
      </picker>
    </view>
    <view class="list">
      <view v-for="(item, index) in data" :key="index" class="item">
        <view class="name">{{item.skill_name}}</view>
        <view class="infos">
          <view class="sub">
            <view class="label">已完成订单数量</view>
            <view class="value">{{item.total_order}}</view>
          </view>
          <view class="sub">
            <view class="label">订单总价</view>
            <view class="value">￥{{item.total_serve_price || '0.00'}}</view>
          </view>
          <view class="sub">
            <view class="label">总附加费</view>
            <view class="value">￥{{item.total_additional_price || '0.00'}}</view>
          </view>
        </view>
      </view>
      <empty v-if="data.length == 0" top="10vh" />
    </view>
  </view>
</template>

<script>
  import { moment } from '@/utils/utils/'
  import { OrderStatisticsApi } from '@/api/'
  const app = getApp()
  
  export default {
    data() {
      return {
        payload: {
          startTime: '',
          endTime: '',
        },
        userInfo: {},
        data: [],
      };
    },
    computed: {
      startEnd() {
        const now = moment('', 'YYYY-MM-DD')
        return this.payload.endTime || now
      },
      endStart() {
        return this.payload.startTime || ''
      },
      end() {
        const now = moment('', 'YYYY-MM-DD')
        return now
      }
    },
    methods: {
      getSysInfo(callback = null) {
        app.getUserInfo((resu) => {
          this.userInfo = resu
          this.loadRes(callback)
        })
      },
      updateStart(e) {
        this.payload.startTime = e.detail.value
        this.updateTime()
      },
      updateEnd(e) {
        this.payload.endTime = e.detail.value
        this.updateTime()
      },
      updateTime() {
        const { startTime, endTime } = this.payload
        if (startTime && endTime) {
          this.loadRes()
        }
      },
      loadRes(callback = null) {
        const user = uni.getStorageSync('userInfo')
        if (user.type == '2') {
          this.data = []
          typeof callback === 'function' && callback()
          return
        }
        this.data = []
        OrderStatisticsApi({
          star_time: this.payload.startTime +' 00:00:00',
          end_time: this.payload.endTime + ' 23:59:59'
        }).then((res) => {
          this.data = res.data
          typeof callback === 'function' && callback()
        }).catch(() => {
          typeof callback === 'function' && callback()
        })
      }
    },
    onLoad() {
      this.getSysInfo()
    },
    onPullDownRefresh() {
      this.getSysInfo(() => {
        uni.stopPullDownRefresh()
      })
    }
  }
</script>

<style lang="scss" scoped>
.statistics-page {
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(to bottom, #236597 0, #236597 158rpx, #F6F6F6 159rpx, #F6F6F6 100%);
  .total-info {
    width: 690rpx;
    height: 172rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    margin: 30rpx auto 0;
    @include flex;
    .item {
      flex: 1;
      @include flex(column);
      line-height: 1.2;
      .val {
        font-size: 48rpx;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        color: #EA9130;
        margin-bottom: 12rpx;
      }
      .txt {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .screen-box {
    @include flex;
    margin: 30rpx;
    .name {
      font-size: 24rpx;
      color: #333;
      margin-right: 10rpx;
    }
    picker {
      flex: 1;
    }
    .time-item {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 5rpx;
      border: 1px solid #DDDBDB;
      height: 60rpx;
      padding-left: 30rpx;
      padding-right: 24rpx;
      @include flex;
      .place {
        font-size: 24rpx;
        color: #333;
        flex: 1;
        &.empty {
          color: #999;
        }
      }
      .arrow {
        @include arrow(44,#444,1,135);
        transform: translateY(-12%);
      }
    }
    .line {
      width: 60rpx;
      font-size: 48rpx;
      color: #666666;
      text-align: center;
    }
  }
  .list {
    overflow: hidden;
    .item {
      width: 690rpx;
      height: 243rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      margin: 0 auto 20rpx;
      overflow: hidden;
      box-sizing: border-box;
      padding: 0 30rpx 36rpx;
      .name {
        font-size: 36rpx;
        line-height: 94rpx;
        color: #333;
      }
      .infos {
        @include flex(row,center,space-between);
        height: 112rpx;
        background: #F3F5F9;
        padding-left: 40rpx;
        padding-right: 40rpx;
        box-sizing: border-box;
        .sub {
          line-height: 1.4;
          .label {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 4rpx;
          }
          .value {
            font-size: 26rpx;
            color: #222;
          }
        }
      }
    }
  }
}
</style>
